.header{
  .list-tab{
    width: 100%;
    height: 30px;
    background: #ebebeb;
    .tab-cont{
      width: 1230px;
      margin: 0 auto;
      height: 100%;
      //display: none;
      ul{
        .li{
          float: left;
          z-index: 999999;
          transition: all 0.15s;
          a{
            padding: 0 24px;
            font-size: 12px;
            line-height: 30px;
            &:hover{
              color:#ca0813;
            }
          }
          .nav-p{
            font-size: 13px;
            font-weight: bold;
            padding:8px;
          }
          .tab{
            position: absolute;
            z-index: 999999;
            background: #fff;
            padding: 8px;
            display: none;
            &>ul{
              li{
                font-weight: 100;
                float: left;
                a{
                  padding: 8px;
                  &:hover{
                    color:#ca0813;
                  }
                }
              }
            }

          }
          .title-info{
            padding: 4px;
            ul{
              li{

                font-size: 12px;
                margin-bottom:12px;
                span{
                  float: left;
                  padding:4px;
                  border-radius:4px;

                  background: #eee;
                }
                p{
                  float: left;
                  padding: 4px;
                  a{
                    line-height: 12px;
                    //padding: 4px;
                    display: block;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
.nav{
  .index-nav-cont{
    height: 100%;
    width: 1230px;
    margin: 0 auto;
    position: relative;
    .ul1{

      //position: relative;
      li{
        float: left;
        a{
          line-height: 40px;
          display: block;
          color:#fff;
          padding:0 20px;
          transition:all 0.3s;
          font-weight: normal;

        }
        &:hover{
          background-color:#ca0813;
        }

      }
      .nav-class{
        float: right;
      }

    }
  }
}

.main-content-top {
  width: 100%;
  height: 426px;
  //margin-top: 5px;

  .sblie-background{
    width: 100%;

    height:100%;
    .scrollPic {
      width: 100%;
      float: left;
      height: 100%;
      overflow: hidden;
      position: relative;
      list-style-type: none;
      .scroll-rigth-cont{
        width: 1230px;
        margin: 0 auto;
        height: 100%;
        position: relative;
        .scroll-rigth{
          position: absolute;
          width:290px;
          height:425px;

          right: 10px;
          .scroll-rigth-bg{
            background: #2b2c2c;
            height: 100%;
            width: 100%;
            opacity: 0.5;
            filter: alpha(opacity=90);
          }
          .cont{
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            position: absolute;
            .course-rank{
              .tab{
                padding: 12px 12px 0 12px;
                height: 34px;
                //border-bottom: 2px solid #e9eaeb;
                span{
                  float: left;
                  font-size: 18px;
                  padding: 0 14px;
                  height: 34px;
                  color: #7f7f7f;
                  cursor: pointer;
                  font-weight: normal;
                }
              }
              ol{
                margin-top: 12px;
                li{
                  height: 44px;
                  line-height: 44px;
                  //border-top: 2px solid #e9eaeb;
                  .box2{

                    color: #fff;
                    float: left;
                  }
                  .title{
                    font-size: 12px;
                    color: #5d5d5d;
                    float: left;
                    width: 160px;
                    display: block;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                  .data{
                    font-size: 12px;
                    color: #8c8c8c;
                    float: right;
                  }
                }
              }
            }
          }
        }
      }

      .left-arrow {
        position: absolute;
        width: 32px;
        height: 60px;
        z-index: 40;
        opacity: 0;
        cursor: pointer;
        left: 12%;
        top: 150px;
        &:hover {
          opacity: 1;
        }
      }
      .right-arrow {
        position: absolute;
        width: 32px;
        height: 60px;
        z-index: 40;
        right: 12%;
        opacity: 0;
        top: 150px;
        cursor: pointer;
        &:hover {
          opacity: 1;
        }
      }
      &:hover {
        .left-arrow, .right-arrow {
          opacity: 0.5;
        }
      }
      .page-btn {
        float: left;
        width: auto;
        height: 30px;
        position: absolute;
        bottom: 10px;
        left: 47%;
        z-index: 30;
        .content {
          width: 163px;
          .current {
            background-color: #999;
            opacity: 1;
          }
          span {
            opacity: 0.7;
            height: 13px;

            width: 13px;
            border-radius: 15px;
            background-color: #fff;
            display: block;
            float: left;
            line-height: 30px;
            text-align: center;
            color: #FFF;
            margin-right: 10px;
            cursor: pointer;
          }
        }
      }
      ul {
        width: 100%;

        height: 100%;
        position: relative;
        //li:nth-child(1){
        //  background:#1f689f;
        //}
        //li:nth-child(2){
        //  background: #291f53;;
        //}
        //li:nth-child(3){
        //  background:#fe9b1c;
        //}
        //li:nth-child(4){
        //  background: #887df3;
        //}
        //li:nth-child(5){
        //  background:#000;
        //}
        li {
          width: 100%;
          height: 426px;
          position: absolute;
          left: 0;
          top: 0;
          list-style-type: none;
          .bgclor{
            width: 100%;
            margin:0 auto;
            height:100%;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  .right {
    width: 287px;
    height: 270px;
    margin-left: 5px;
    float: left;
    overflow: hidden;
    .title {
      font-size: 16px;
      text-align: center;
      height: 34px;
      line-height: 34px;
      background: #00A4DD;
      //background: -webkit-linear-gradient(#59acf4, #0453b8);
      //background: -o-linear-gradient(#59acf4, #0453b8);
      //background: -moz-linear-gradient(#59acf4, #0453b8);
      //background: linear-gradient(#59acf4, #0453b8);
      .ico-note-ico {
        float: left;
        margin-left: 30px;
        margin-top: 7px;
        margin-right: 10px;
      }
      .context {
        font-weight: 400;
        height: 34px;
        line-height: 34px;
        display: block;
        color: #fff;
        float: left;
        padding-left: 22px;
      }
    }
    ul {
      background-color: #f7f7ff;
      width: 285px;
      height: 228px;
      border: 1px solid #ccc;
      margin-top: 5px;
      li {
        margin: 6px 15px;
        padding: 2px 0;
        a {
          display: block;
          line-height: 18px;
          height: 18px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 12px;
          position: relative;
          padding: 4px 0 4px 40px;
          span {
            margin-right: 5px;
            &:before {
              content: "";
              width: 10px;
              display: block;

              height: 10px;
              background-color: #000;
              //border: 1px solid #000;
              position: absolute;
              left: 15px;
              top: 8px;
            }
          }
          &:hover {
            color: #fff;
            background-color: #bbb;
          }
        }
      }
    }
  }
}